<template>
  <div class="basic_wrap">
    <div>
      <!--    <div class="basic_wrap">-->
      <!--      <div class="block_div top_header">-->
      <!--        <div class="flex_center user_detail_wrap">-->
      <!--          <div class="user_detail">-->
      <!--            <div class="user_header">-->
      <!--              <img :src="user_info.user_icon" alt="">-->
      <!--            </div>-->
      <!--            <div class="user_name">-->
      <!--              <div class="user_all">-->
      <!--                <p class="user_nickname">{{user_info.username}}</p>-->
      <!--              </div>-->
      <!--            </div>-->
      <!--          </div>-->
      <!--          <div class="invite_code">-->
      <!--            <p class="invite_tips">{{$t('user.invite_code')}}</p>-->
      <!--            <div class="flex_center copy" v-clipboard="()=>user_info.invite_code" v-clipboard:success="copy">-->
      <!--              <p>{{user_info.invite_code}}</p>-->
      <!--              <img class="copy_img" src="../img/user/copy.png">-->
      <!--            </div>-->
      <!--          </div>-->
      <!--        </div>-->
      <!--        &lt;!&ndash; <div class="flex_center invite_link_wrap"  v-clipboard="()=>user_info.share_link" v-clipboard:success="copy">-->
      <!--          <div class="invite_link" >-->
      <!--            <span>{{$t('team.inviteLink')}}</span>-->
      <!--            <span class="link">{{user_info.share_link}}</span>-->
      <!--          </div>-->
      <!--          <img class="copy_img" src="../img/user/copy.png">-->
      <!--        </div> &ndash;&gt;-->
      <!--        <div class="user_earing">-->
      <!--          <div class="flex_center today_earing">-->
      <!--            <div class="total_earing">-->
      <!--              <p>{{common.currency_symbol_basic()}}{{common.precision_basic(report.income)}}</p>-->
      <!--              <p>{{$t('team.totalRevenue')}}</p>-->
      <!--            </div>-->
      <!--            <div class="today">-->
      <!--              <p>{{common.currency_symbol_basic()}}{{common.precision_basic(report.income_to)}}</p>-->
      <!--              <p>{{$t('team.today')}}</p>-->
      <!--            </div>-->
      <!--            <div class="yesterday">-->
      <!--              <p>{{common.currency_symbol_basic()}}{{common.precision_basic(report.income_ye)}}</p>-->
      <!--              <p>{{$t('team.yesterday')}}</p>-->
      <!--            </div>-->
      <!--          </div>-->
      <!--        </div>-->
      <!--      </div>-->
      <!--      <div class="block_div my_team_wrap">-->
      <!--        <div class="flex_center team_detail">-->
      <!--          <div>-->
      <!--            <p>{{report.add_count}}</p>-->
      <!--            <p>{{$t('team.total')}}({{$t('team.people')}})</p>-->
      <!--          </div>-->
      <!--          <div>-->
      <!--            <p>{{report.add_count_to}}</p>-->
      <!--            <p>{{$t('team.today')}}({{$t('team.people')}})</p>-->
      <!--          </div>-->
      <!--        </div>-->
      <!--      </div>-->
      <!--      <div class="block_div team_list_wrap">-->
      <!--        <div class="team_list_title">-->
      <!--          {{$t('team.teamList')}}-->
      <!--        </div>-->
      <!--        <div class="list_item">-->
      <!--          <van-list v-model="loading" offset="100" :finished="finished"  @load="onLoad">-->
      <!--            <div class="item" v-for="(item,index) in list">-->
      <!--              <div class="flex_center">-->
      <!--                <p>{{item.act_time}}</p>-->
      <!--                <p v-if="item.level==1" class="color_red">{{$t('team.direct')}}</p>-->
      <!--                <p v-if="item.level!=1">{{$t('team.indirect')}}</p>-->
      <!--              </div>-->
      <!--              <div class="flex_center">-->
      <!--                <p>{{item.username}}</p>-->
      <!--                <p>{{common.currency_symbol_basic()+common.precision_basic(item.recharge_sum)}}</p>-->
      <!--              </div>-->
      <!--              <div class="flex_center">-->
      <!--                <p>{{$t('team.username')}}</p>-->
      <!--                <p>{{$t('team.totalRecharge')}}</p>-->
      <!--              </div>-->
      <!--            </div>-->
      <!--          </van-list>-->
      <!--          <van-empty v-if="empty" :description="$t('utils.noData')" />-->
      <!--        </div>-->
      <!--      </div>-->
      <!--      <van-popup v-model:show="show_share" position="bottom" closeable close-icon-position="top-left">-->
      <!--        <div class="share_wrap">-->
      <!--          <div class="share">-->
      <!--            <div class="invite_friend">-->
      <!--              <p></p>-->
      <!--            </div>-->
      <!--            <div class="share_code">-->
      <!--              <img :src="user_info.share_code">-->
      <!--            </div>-->
      <!--            <div class="invite_code flex_center">-->
      <!--              <p>{{$t('user.invite_code')}}:</p>-->
      <!--              <p class="code_link" v-clipboard="()=>user_info.invite_code" v-clipboard:success="copy">-->
      <!--                {{user_info.invite_code}}-->
      <!--                <img class="copy_img" src="../img/user/copy.png">-->
      <!--              </p>-->
      <!--            </div>-->
      <!--            <div class="invite_code flex_center">-->
      <!--              <p>{{$t('team.inviteLink')}}</p>-->
      <!--              <div class="flex_center invite_link">-->
      <!--                <p class="code_link" v-clipboard="()=>user_info.share_link" v-clipboard:success="copy">-->
      <!--                  {{user_info.share_link}}-->
      <!--                </p>-->
      <!--                <img class="copy_img" src="../img/user/copy.png">-->
      <!--              </div>-->
      <!--            </div>-->
      <!--          </div>-->
      <!--        </div>-->
      <!--      </van-popup>-->
      <!--      &lt;!&ndash; 客服图标 &ndash;&gt;-->
      <!--      <div class="kefu share_btn" @click="show_share = true;">-->
      <!--        <img class="kefu_img" src="../img/user/share.png">-->
      <!--      </div>-->
      <!--    </div>-->
    </div>
    <div class="info">
      <img :src="user_info.user_icon" class="headImg">
      <div class="name">
        <div class="nameTop">{{user_info.username}}</div>
        <div class="nameBot">
          <img :src="user_info.vip.logo" class="titleImg" v-if="user_info.vip">
          <div class="nameVip" v-if="user_info.vip">{{user_info.vip.rewards_profit}}%</div>
        </div>
      </div>
      <div class="infoRight" v-clipboard="()=>user_info.invite_code" v-clipboard:success="copy">
        邀请码：{{user_info.invite_code}}
        <img src="@/assets/img/copyIcon.png"  class="IRImg">
      </div>
    </div>
    <div class="middle" v-if="user_info.next_vip">
      <div class="miTop">升级{{user_info.next_vip.name}}团长</div>
      <div class="miDeatil">升级{{user_info.next_vip.name}}团长可享受团队收益{{user_info.next_vip.rewards_profit}}%</div>
      <img class="floatImg" src="@/assets/img/teamLogo.png">
      <div class="miLine">
        <div class="miLineItem">
          <div class="lineTop">
            <div class="lineActive" :style="{width:(Number(user_info.next_need_count)/Number(user_info.next_vip.need_mid_count)*100) + '%'}"></div>
          </div>
          <div class="lineBot">
            <div class="lBLeft">{{user_info.next_vip.need_mid_name}}≥{{user_info.next_vip.need_mid_count}}人</div>
            <div class="lBRight">{{user_info.next_need_count}}/{{user_info.next_vip.need_mid_count}}</div>
          </div>
        </div>
        <div class="miLineItem">
          <div class="lineTop">
            <div class="lineActive" :style="{width:(Number(user_info.team_money)/Number(user_info.next_vip.need_amount)*100) + '%'}"></div>
          </div>
          <div class="lineBot">
            <div class="lBLeft">累计业绩≥{{user_info.next_vip.need_amount}}</div>
            <div class="lBRight">{{user_info.team_money}}/{{user_info.next_vip.need_amount}}</div>
          </div>
        </div>
      </div>
    </div>
    <div class="myTeam">
      <div class="teamTitle">
        <div class="teamTL">我的收益</div>
        <div class="teamTR" @click="$router.push('/teamProfit')">
          <div>收益详情</div>
          <div class="teamRight">
            <img src="@/assets/img/teamRight.png">
          </div>
        </div>
      </div>
      <div class="myTeamDeatil">
        <div class="myTDTop">
          <div class="teamItem">
            <div class="teamITitle">总收益</div>
            <div class="teamINub">{{report.income_sum || 0}}U</div>
          </div>
          <div class="teamItem">
            <div class="teamITitle">昨日</div>
            <div class="teamINub">{{report.income_sum_ye || 0}}U</div>
          </div>
          <div class="teamItem">
            <div class="teamITitle">前日</div>
            <div class="teamINub">{{report.income_sum_ye_ye || 0}}U</div>
          </div>
        </div>
      </div>
    </div>
    <div class="myTeam">
      <div class="teamTitle">
        <div class="teamTL">我的团队</div>
<!-- teamList-->
        <div class="teamTR" @click="$router.push('/teamList')">
          <div>团队列表</div>
          <div class="teamRight">
            <img src="@/assets/img/teamRight.png">
          </div>
        </div>
      </div>
      <div class="myTeamDeatilTeam">
        <div class="myTDTop">
          <div class="teamItem">
            <div class="teamITitle">总收益</div>
            <div class="teamINub">{{report.team_income || 0}}U</div>
          </div>
          <div class="teamItem">
            <div class="teamITitle">今日</div>
            <div class="teamINub">{{report.team_income_to || 0}}U</div>
          </div>
        </div>
<!--        <div class="myTDTop">-->
<!--          <div class="teamItem">-->
<!--            <div class="teamITitle">昨日</div>-->
<!--            <div class="teamINub">{{report.team_income_ye || 0}}U</div>-->
<!--          </div>-->
<!--          <div class="teamItem">-->
<!--            <div class="teamITitle">前日</div>-->
<!--            <div class="teamINub">{{report.income_sum_ye_ye || 0}}U</div>-->
<!--          </div>-->
<!--        </div>-->
        <div class="myTDBot">
          <div class="tdBItem">总数(人):{{report.team_count || 0}}</div>
          <div class="tdBItem">今日(人):{{report.team_add_count_to || 0}}</div>
        </div>
      </div>
    </div>
    <div>
      <teamLev></teamLev>
    </div>
    <div class="kefu"  @click="kefu_to">
      <img class="kefu_img" src="@/assets/img/inviteImg.png">
    </div>
  </div>
</template>

<script>
import Vue from 'vue';
import Fetch from '../../utils/fetch'
import Clipboard from "v-clipboard";
import teamLev from '../../components/teamLev.vue'
import {
  Icon,
  List,
  Empty,
  Popup
} from "vant";

Vue.use(Icon).use(Clipboard).use(List).use(Empty).use(Popup);
export default {
  name: "team",
  components: {
    teamLev
  },
  data() {
    return {
      user_info: [],
      show_kefu:false,
      report: {
        "direct_count": 0,
        "indirect_count": 0,
        "income": 0,
        "income_to": 0,
        "income_ye": 0,
        "add_count": 0,
        "add_count_to": 0,
        "add_count_ye": 0
      },
      show_share: false,
      empty: false,
      loading: false,
      finished: false,
      list: [],
      page: 1,
      listRows: 8,
      imgUrl:'https://pic1.zhimg.com/v2-fa1fa693bc0a7f631f87d442366fdd0e_r.jpg'
    };
  },
  created() {
    if (window.plus) {
      plus.navigator.setStatusBarBackground('#0F6EFF');
      plus.navigator.setStatusBarStyle('light');
    }
    this.$parent.footer('team');
  },
  mounted() {
    var that = this;
    document.body.addEventListener(
        "scroll",
        function() {
          if (!that.show_kefu) {
            return;
          }
          that.show_kefu = false;
        },
        false
    );
    document.addEventListener(
        "click",
        function(ev) {
          if (ev.target.className != "kefu_img") {
            that.show_kefu = false;
          }
        },
        false
    );
    this.start();
  },
  methods: {
    kefu_to() {
      this.$router.push("/invite");
    },
    copy() {
      this.$toast(this.$t('recharge.copySuccess'));
    },
    start() {
      Fetch('/user/myTeam').then((r) => {
        this.user_info = r.data.user_info;
        this.report = r.data.report;
        this.rate = 100;
      });
    },
    onLoad() {
      Fetch('/user/teamList', {
        page: this.page,
        listRows: this.listRows
      }).then(r => {
        if (r.data.length == 0) this.empty = true;
        var list = r.data.list;
        for (var i = 0; i < list.length; i++) {
          this.list.push(list[i]);
        }
        if (this.list.length >= r.data.length) {
          this.finished = true;
          return;
        }
        this.page = this.page + 1;
        this.loading = false;
      });
    }
  }
};
</script>

<style lang="less" scoped>
.basic_wrap {
  min-height: 100vh;
  width: 100vw;
  box-sizing: border-box;
  background-image: url(../../assets/img/otherBac.png);
  background-size: cover;
  background-position: center top;
  padding: 42px 16px 60px;
  .info{
    display: flex;
    .headImg{
      width: 56px;
      height: 56px;
      border-radius: 28px;
      margin-right: 10px;
    }
    .name{
      flex: 1;
      .nameTop{
        font-size: 16px;
      }
      .nameBot{
        display: flex;
        align-items: center;
        margin-top: 8px;
        .titleImg{
          width: auto;
          height: 16px;
          margin-right: 8px;
        }
        .nameVip{
          color: #0069FF;
          padding: 2px 8px;
          background: #B0D0FF;
          border-radius: 8px 8px 8px 0px;
          font-size: 12px;
        }
      }
    }
    .infoRight{
      display: flex;
      font-size: 14px;
      .IRImg{
        width: 16px;
        height: 16px;
        margin-left: 5px;
      }
    }
  }
  .middle{
    height: 163px;
    margin-top: 30px;
    background-image: url(../../assets/img/myLev.png);
    background-size: 100% 100%;
    padding: 16px 10px 10px;
    position: relative;
    margin-bottom: 26px;
    .miTop{
      font-size: 16px;
      font-weight: bold;
      color: #010101;
      margin-bottom: 8px;
    }
    .miDeatil{
      color: #A3A3A3;
      margin-bottom: 24px;
    }
    .floatImg{
      position: absolute;
      top: -50px;
      right: 0;
      width: 112px;
      height: 112px;
    }
    .miLine{
      margin: 0 5px;
      .miLineItem{
        margin-bottom: 16px;
        .lineTop{
          height: 6px;
          width: 100%;
          background: #DEEBFE;
          border-radius: 3px;
          margin-bottom: 7px;
          position: relative;
          overflow: hidden;
          .lineActive{
            position: absolute;
            left: 0;
            height: 100%;
            background: linear-gradient(0deg, #046BFF 0%, #0489FE 100%);
            border-radius: 3px;
          }
        }
        .lineBot{
          display: flex;
          font-size: 12px;
          color: #A3A3A3;
          .lBLeft{
            flex: 1;
          }
          .lBRight{}
        }
      }
    }
  }
  .myTeam{
    margin-bottom: 24px;
    .teamTitle{
      display: flex;
      align-items: center;
      font-size: 14px;
      color: #010101;
      .teamTL{
        flex: 1;
        font-weight: 550;
      }
      .teamTR{
        display: flex;
        align-items: center;
        .teamRight{
          margin-left: 5px;
          font-weight: 400;
          img{
            width: 16px;
            height: 16px;
          }
        }
      }
    }
    .myTeamDeatil{
      .myTDTop{
        display: flex;
        justify-content: space-between;
        padding-top: 18px;
        .teamItem{
          width: 28.8vw;
          height: 72px;
          border-radius: 8px;
          box-sizing: border-box;
          padding: 16px 0 0 16px;
          background: #ffffff;
          .teamITitle{
            color: #A3A3A3;
            font-size: 12px;
            margin-bottom: 10px;
          }
          .teamINub{
            font-size: 14px;
            font-weight: bold;
          }
        }
      }
      .myTDBot{
        display: flex;
        justify-content: space-between;
        margin-top: 8px;
        font-size: 14px;
        .tdBItem{
          width: 44vw;
          height: 45px;
          background: #FFFFFF;
          border-radius: 8px;
          display: flex;
          align-items: center;
          justify-content: center;
        }
      }
    }
    .myTeamDeatilTeam{
      margin-top: 16px;
      .myTDTop{
        display: flex;
        justify-content: space-between;
        margin-bottom: 8px;
        .teamItem{
          width: 44vw;
          height: 72px;
          border-radius: 8px;
          box-sizing: border-box;
          padding: 16px 0 0 16px;
          background: #ffffff;
          .teamITitle{
            color: #A3A3A3;
            font-size: 12px;
            margin-bottom: 10px;
          }
          .teamINub{
            font-size: 14px;
            font-weight: bold;
          }
        }
      }
      .myTDBot{
        display: flex;
        justify-content: space-between;
        font-size: 14px;
        .tdBItem{
          width: 44vw;
          height: 45px;
          background: #FFFFFF;
          border-radius: 8px;
          display: flex;
          align-items: center;
          justify-content: center;
        }
      }
    }
  }
}
</style>
